<template>
    <div class="table-all">
        <!-- 搜索区 -->
        <div class="app-container search-box">
            <SearchForm
                    :form="searchData.form"
                    :options="searchData.options"
                    @searchUpdate="search"
                    @resetSearchData="resetSearchData"
                    @toLoadMethods="toLoadMethods"
            ></SearchForm>
        </div>
        <!-- 按钮区 -->
        <div class="app-container table-box">
            <div class="table-main">
                <!-- 表格 -->
                <v-table
                        title="风险隐患统计报表"
                        v-if="tableMainHeight>0"
                        :table-columns="tableColumns"
                        :table-data="tableData"
                        :loading="loading"
                        :is-index="false"
                        ref="table"
                        :maxHeight="tableMainHeight">
                    <template #topButtonList>
                        <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
                    </template>
                    <template #fxyhdl="scope">
                      {{getDictValue(scope.row.fxyhdl, hazardBClassifyOptions)}}
                    </template>
                    <template #fxyhxl="scope">
                      <!--{{getDictValue(scope.row.fxyhxl, hazardSClassifyOptions)}}-->
                      {{ $commonJs.getRiskHazardLabelName(scope.row.fxyhdl, scope.row.fxyhxl, hazardBClassifyList)}}
                    </template>
                    <template #fxyhsjlb="scope">
                      <!--{{getDictValue(scope.row.fxyhsjlb, hazardCategoryOptions)}}-->
                      {{ $commonJs.getRiskHazardLabelName(scope.row.fxyhxl, scope.row.fxyhsjlb, hazardSClassifyList)}}
                    </template>
                    <template #fxyhdj="scope">
                      {{getDictValue1(scope.row.fxyhdj, patrolHazardLevelOptions)}}
                    </template>
                    <template #operation="scope">
                        <a v-hasPermission="['hazardlDataReport:update']" class="table-btn-edit table-operation"
                           @click="handleEdit(scope.row)">{{$t('table.edit')}}</a>
                    </template>
                </v-table>
            </div>
            <div class="table-page">
                <!-- 页码 -->
                <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                            @pagination="search"/>
            </div>
        </div>
        <!-- 详情 -->
        <detailDialog :dialog-visible="detailDialogShow"
                    @success="editSuccess"
                    @close="editClose"
                    :hazardBClassifyOptions="hazardBClassifyOptions"
                    :patrolHazardLevelOptions="patrolHazardLevelOptions"
                    :openType="detailOpenType"
                    :id="detailId"
                    :title="detailTitle"
        ></detailDialog>
    </div>
</template>

<script>
    import { hazardlDataReportPage,
            hazardlDataReportExport,
            hazardlDataReportDelete } from '@/api/risk/hazardReport'
    import { treeDataChild, treeDataList} from '@/api/risk/treeData'
    import SearchForm from '@/components/searchForm/index'
    import ButtonForm from '@/components/ButtonForm/index'
    import VTable from '@/components/VTable/index'
    import Pagination from '@/components/Pagination/index'
    import detailDialog from './detail.vue'
    export default {
        components:{
            VTable,Pagination,detailDialog,SearchForm,ButtonForm
        },
        data(){
            return{
                tableColumns:[
                            {
                                prop: 'csjs',
                                label: '城市简述',
                                minWidth: '150',
                                slotname: 'csjs',
                                options: {}
                            },
                            {
                                prop: 'tjyf',
                                label: '统计月份',
                                minWidth: '150',
                                slotname: 'tjyf',
                                options: {}
                            },
                            {
                                prop: 'fxyhdl',
                                label: '风险隐患大类',
                                minWidth: '150',
                                slotname: 'fxyhdl',
                                options: {}
                            },
                            {
                                prop: 'fxyhxl',
                                label: '风险隐患细类',
                                minWidth: '150',
                                slotname: 'fxyhxl',
                                options: {}
                            },
                            {
                                prop: 'fxyhsjlb',
                                label: '风险隐患三级类别',
                                minWidth: '150',
                                slotname: 'fxyhsjlb',
                                options: {}
                            },
                            {
                                prop: 'fxyhdj',
                                label: '风险隐患等级',
                                minWidth: '150',
                                slotname: 'fxyhdj',
                                options: {}
                            },
                            {
                                prop: 'fxyhpf',
                                label: '风险隐患评分',
                                minWidth: '150',
                                slotname: 'fxyhpf',
                                options: {}
                            },
                            {
                                prop: 'dyfxyhgs',
                                label: '当月风险隐患个数',
                                minWidth: '150',
                                slotname: 'dyfxyhgs',
                                options: {}
                            },
                            {
                                prop: 'tjsj',
                                label: '统计时间',
                                minWidth: '150',
                                slotname: 'tjsj',
                                options: {}
                            },
                    {
                        prop: 'operation',
                        label: '操作',
                        width: '200',
                        align: 'center',
                        slotname: 'operation',
                        overflow: false,
                        fixed: 'right'
                    }
                ],
                tableData:[],
                selection: [],
                loading:false,
                total:1,
                pageNum:1,
                pageSize:10,
                detailOpenType:"add",
                detailDialogShow:false,
                detailId:"",
                detailTitle:"新增",
                dict:{},
                searchData:{
                  form:{
                        TJYF:'',
                        FXYHDL:'',
                        FXYHXL:'',
                        FXYHSJLB:'',
                },
                   options:[
                             {
                                 title:'统计月份',
                                 key: "TJYF",
                                 type: "dateMonth",
                             },
                             {
                                 title:'隐患大类',
                                 key: "FXYHDL",
                                type: "select",
                                multiple:false,
                                option: {
                                  data: this.planTypeOptions,
                                  props: {
                                    key: "id", // 指定key对应data的字段
                                    label: "label", // 指定label对应data的字段
                                    value: "name", // 指定value对应data的字段
                                  },
                                },
                               event:"changeBclassify",
                             },
                             {
                                 title:'隐患细类',
                                 key: "FXYHXL",
                                 type: "select",
                                 multiple:false,
                                 option: {
                                   data: this.planTypeOptions,
                                   props: {
                                     key: "id", // 指定key对应data的字段
                                     label: "label", // 指定label对应data的字段
                                     value: "name", // 指定value对应data的字段
                                   },
                                 },
                             },
                             {
                                 title:'三级类别',
                                 key: "FXYHSJLB",
                                type: "select",
                                multiple:false,
                                option: {
                                  data: this.hazardCategoryOptions,
                                  props: {
                                    key: "id", // 指定key对应data的字段
                                    label: "label", // 指定label对应data的字段
                                    value: "name", // 指定value对应data的字段
                                  },
                                },
                             },
                   ]
                },
                buttonList:[
                    // {name:'导出',methods:'handleExport'}
                    {name:'导出数据',methods:'handleExport', type:'primary'}
                ],
                tableMainHeight: 0,
                // 字典
              hazardBClassifyOptions:[],
              hazardSClassifyOptions:[],
              hazardCategoryOptions:[],
              patrolHazardLevelOptions:[],
              sClassifyOptions:[],
              hazardBClassifyList:[],
              hazardSClassifyList:[]
            }
        },
        watch: {
          // 字典
          'hazardBClassifyOptions':{
            handler(newVal, oldVal) {
              this.searchData.options.forEach(t=>{
                if(t.key=='FXYHDL'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
          'hazardCategoryOptions':{
            handler(newVal, oldVal) {
              this.searchData.options.forEach(t=>{
                if(t.key=='FXYHSJLB'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
          'sClassifyOptions':{
            handler(newVal, oldVal) {
              this.searchData.options.forEach(t=>{
                if(t.key=='FXYHXL'){
                  t.option.data = newVal
                }
              })
            },
            deep: true,
            immediate: true
          },
        },
        methods:{
            toLoadMethods(methods){
              this[methods]();
            },
            changeBclassify(){
              this.searchData.form.FXYHXL='';
              this.sClassifyOptions=[]
              this.sendBclassifyData();
            },
           async sendBclassifyData(){
             let queryData ={}
             queryData.name='hazardBClassify';
             queryData.code =this.searchData.form.FXYHDL;
             let res =await treeDataChild(queryData);
             if(res.code==200) {
               let that = this
               res.data.forEach(function (item,index){
                 var one ={}
                 one.label= item.label;
                 one.name=item.code;
                 that.sClassifyOptions.push(one);
               })
             }
           },
            getDictValue(value,option){
                let item = option.find(t=> t.name == value)
                if(item!=undefined){
                    return item.label
                }
                return value
            },
            getDictValue1(value,option){
              let item = option.find(t=> t.value == value)
              if(item!=undefined){
                return item.label
              }
              return value
            },
            editClose(){
                this.detailDialogShow = false
            },
            editSuccess(){
                this.search()
                this.detailDialogShow = false
            },
            search(){
                this.fetch({
                        ...this.searchData.form,
                })
            },
            fetch(params={}){
                params.pageSize = this.pageSize
                params.pageNum = this.pageNum
                this.loading = true
                 hazardlDataReportPage(params).then(res=>{
                    if(res.code==200){
                        this.total = res.data.total
                        this.tableData = res.data.rows
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                     })
                   }
                }).finally(final=>{
                    this.loading = false
               })
            },
            // 重置搜索条件
            resetSearchData(){
                this.searchData.form = {
                        TJYF:'',
                        FXYHDL:'',
                        FXYHXL:'',
                        FXYHSJLB:'',
            }
            },

            // 触发按钮区域按钮方法
            clickButton(methods){
                this[methods]()
            },
            handleAdd(){
                this.detailOpenType = "add"
                this.detailTitle = "新增"
                this.detailDialogShow = true
            },
            handleEdit(row){
                this.detailId = row.id
                this.detailOpenType = "edit"
                this.detailTitle="编辑"
                this.detailDialogShow = true
            },
            handleExport(){
                let params = {
                        ...this.searchData.form
                }
                hazardlDataReportExport(params,`风险隐患统计上报_${new Date().getTime()}.xlsx`);
            },
            handleImport(){
                console.log("等待处理")
            },
            closeDialog(){
                this.detailDialogShow = false
            },

            singleDelete(row){
                this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    hazardlDataReportDelete(row.id).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.deleteSuccess'),
                        type: 'success'
                    })
                    this.search()
                     }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                    }
                 }).finally(final=>{
                    this.loading = false
                 })
                })
            }
        },
        activated(){
            this.fetch()
        },
        created(){
            // 获取字典值
          this.hazardBClassifyOptions = []
          this.$commonJs.filterDataDict("hazardBClassify",this.hazardBClassifyOptions)
          this.hazardSClassifyOptions = []
          this.$commonJs.filterDataDict("hazardSClassify",this.hazardSClassifyOptions)
          this.hazardCategoryOptions = []
          this.$commonJs.filterDataDict("hazardCategory",this.hazardCategoryOptions)
          this.patrolHazardLevelOptions = []
          this.$commonJs.filterDataDict("patrolHazardLevel",this.patrolHazardLevelOptions)
          treeDataList({name:"hazardBClassify"}).then(res=>{
            if(res.code==200){
              this.hazardBClassifyList = res.data
            }
          })
          treeDataList({name:"hazardSClassify"}).then(res=>{
            if(res.code==200){
              this.hazardSClassifyList = res.data
            }
          })
        },
        mounted(){
            this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
        }
    }
</script>

<style lang="scss" scoped>
    .table-all {
        display: flex;
        flex-direction: column;
        height: 100%;

    .search-box {
        padding-bottom: 6px;
    }

    .table-box {
        padding-top: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

    .table-main {
        flex: 1;
        overflow: auto;
    }

    .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
    }

    ::v-deep .pagination-container {
        text-align: right;
    }

    }
    }
</style>
